<template>
  <div class="container">
    <div class="title">确认挂号信息</div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>选择就诊人</span>
          <el-button class="button" type="primary" :icon="User" @click="goUser"
            >添加就诊人</el-button
          >
        </div>
      </template>
      <div class="patient-box">
        <Patient
          v-for="(item, index) in userList"
          :key="item.id"
          :item="item"
          @click="changeIndex(index)"
          :index="index"
          :currentIndex="currentIndex"
        >
        </Patient>
      </div>
    </el-card>
    <!-- 医生信息 -->
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>挂号信息</span>
        </div>
      </template>
      <el-descriptions :column="3" border>
        <el-descriptions-item width="150px">
          <template #label>
            <div class="cell-item">就诊日期：</div>
          </template>
          {{ doctorData.workDate }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">就诊医院：</div>
          </template>
          {{ doctorData.param?.hosname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">就诊科室：</div>
          </template>
          {{ doctorData.param?.depname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生姓名：</div>
          </template>
          {{ doctorData.docname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生职务：</div>
          </template>
          {{ doctorData.title }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生专长：</div>
          </template>
          {{ doctorData.skill }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生服务费用：</div>
          </template>
          <span style="color: red">{{ doctorData.amount }}</span>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <div class="btn">
      <el-button
        type="primary"
        style="width: 200px"
        :disabled="currentIndex == -1 ? true : false"
        @click="submitOrder"
        >确认挂号</el-button
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { reqGetUser, reqDoctor } from "@/api/hospital/index";
import { reqSubmitOrder } from "@/api/user/index.ts";
import { ElMessage } from "element-plus";
import type {
  UserArr,
  UserResponseData,
  RegisterDoctor,
  RegisterDoctorResponseData,
} from "@/api/hospital/type";
import { User } from "@element-plus/icons-vue";
let $route = useRoute();
let $router = useRouter();
// 存儲病人列表
let userList = ref<UserArr>([]);
// 存储医生的信息
let doctorData = ref<RegisterDoctor>({} as RegisterDoctor);
// 存储点击了第几个卡片用于显示已选择框
let currentIndex = ref<number>(-1);
onMounted(() => {
  fetchUserData();
  fetchDoctorData();
});
// 获取就诊人信息
const fetchUserData = async () => {
  const result: UserResponseData = await reqGetUser();
  if (result.code == 200) {
    userList.value = result.data;
  }
};
// 获取挂号医生的信息
const fetchDoctorData = async () => {
  const result: RegisterDoctorResponseData = await reqDoctor(
    $route.query.scheduleId as string
  );
  if (result.code == 200) {
    doctorData.value = result.data;
  }
};
// 点击卡片存储当前卡片索引   用户显示已选择
const changeIndex = (index: number) => {
  currentIndex.value = index;
};
// 确定挂号
const submitOrder = async () => {
  // 医院编号
  let hoscode = doctorData.value.hoscode;
  // 医生ID
  let scheduleId = doctorData.value.id;
  // 病人的ID
  let patientId = userList.value[currentIndex.value].id;
  // const result = await reqSubmitOrder(hoscode, scheduleId, patientId);
  const result = 200;
  // if (result.code == 200) {
  if (result == 200) {
    $router.push({
      path: "/user/order",
      query: {
        // orderId: result.data,
        orderId: 431,
      },
    });
  } else {
    ElMessage({
      type: "error",
      message: "result.message",
    });
  }
};
// 添加就诊人
const goUser = () => {
  $router.push({
    path: "/user/patient",
    query: { type: "add" },
  });
};
</script>
<script lang="ts">
export default {
  name: "Register_step2",
};
</script>
<style scoped lang="scss">
.container {
  .box-card {
    margin-bottom: 20px;
  }
  .title {
    font-size: 20px;
    margin-bottom: 20px;
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  ::v-deep(.el-card__body .patient-box) {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
}
</style>
